<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>柱状图</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .histogram{
        display: flex;
        width: 700px;
        border-left: 1px solid pink;
        border-bottom: 1px solid pink;
        margin: 50px auto;
        justify-content: space-around;
        align-items: flex-end;
        text-align: center;
        font-size: 14px;
    }
    .histogram>div{
        display: flex;
        width: 50px;
        flex-direction: column;
        background-color: pink;
        justify-content: space-between;
    }   
    .histogram div span{
        margin-top: -20px;
    }
    .histogram div h4{
        margin-bottom: -35px;
        width: 70px;
        margin-left: -10px;
    }
</style>
<body>
    <div class="histogram">
    </div>
</body>
<script>
    var datas = {'第一季度':100,'第二季度':2,'第三季度':3,'第四季度':4,'第五季度':5};
    var length = Object.values(datas).length;
    var histogram = document.querySelector('.histogram');
    for (let i = 0; i <length; i++) {
        var divs = document.createElement('div');
        var spans = document.createElement('span');
        var h4s = document.createElement('h4');
        divs.style.height = (Object.values(datas)[i]+20)+'px';
        spans.innerHTML = Object.values(datas)[i]+20;
        h4s.innerHTML = Object.keys(datas)[i]
        histogram.appendChild(divs);
        var divlist = document.querySelector('.histogram div:nth-child('+(i+1)+')');
        divlist.appendChild(spans);
        divlist.appendChild(h4s);
    }
</script>
</html>